<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>movie</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/04.css">
	<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
	<div id="black"></div>
<!-- 头部导航 -->
	<div class="center-box">
		<ul class="nav clearfix">
			<li><a href="main.html"><i class="iconfont icon-shouye-shouye"></i>首页</a></li>
			<li><a href="store.html"><i class="iconfont icon-gouwucheman"></i>商店</a></li>
			<li><a href="amusement.html"><i class="iconfont icon-luleyuan6259cf"></i>乐园</a></li>
			<li><a href="main.html"><img src="img/t_logo.png" alt=""></a></li>
			<li><a href="" style="color: #f00"><i class="iconfont icon-yingshi"></i>影视</a></li>
			<li><a href=""><i class="iconfont icon-shuma"></i>数码</a></li>
			<li><a href=""><i class="iconfont icon-yingyuxuexiao"></i>迪士尼英语</a></li>
		</ul>
	</div>

	
<!-- 滚动大图 -->
	<div class="center-box">
		<div class="banner">
			<a href=""><img src="img/170307160400016253.jpg" alt=""></a>
			<!-- <div class="buy-tickets"></div>
			<div class="see-video"></div> -->
			<ul class="extra">
				<li>
					<img src="img/icon-tickets.png" alt="">
					<a href="">购票</a>
				</li>
				<li>
					<img src="img/icon-video.png" alt="">
					<a href="javascript:void(0)" id="view" onclick="showVid()">
						观看视频						
					</a>
				</li>
			</ul>
		</div>
	</div>

<!-- 主体内容 -->
	<div class="center-box">
		<ul class="contener">
			<li><p>最新电影</p></li>
			<li class="top clearfix">
				<a href="" id="big" style="height: 600px">
					<img src="img/170406162903374320.jpg" alt="">
					<div class="galaxy">
						<h4>《银河护卫队2》确定中国同步北美上映</h4>
						<p>5月5日，周五，一群逗B英雄燃爆漫威宇宙！</p>
					</div>
				</a>

				<ul class="img-group clearfix">
					<li><a href=""><img src="img/170328164625440772.jpg" alt="" width="299" height="299" style="border-right: 1px solid silver;border-top: 1px solid silver"></a></li>
					<li>
						<a href=""><h4>《赛车总动员3：极速挑战》三位全新角色闪亮登场！</h4></a>
						<div class="font">
							《赛车总动员3》6月全球上映，主要角色大曝光！“黑风暴杰克逊”造型酷炫亮相。
							<a href=""><div class="circle"></div></a>
						</div>
					</li>
					<li>
						<a href=""><h4>《寻梦环游记》确定11月22日北美正式上映</h4></a>
						<div class="font">
							本片导演李·昂克里奇和制片人达拉·K·安德森曾一同搭档合作过《玩具总动员3》，还请到了《怪兽大学》的故事艺术家担当联合导演，共同创造又一迪士尼·皮克斯巨作！
							<a href=""><div class="circle"></div></a>
						</div>
					</li>
					<li><a href=""><img src="img/170328145927690441.jpg" alt="" width="300" height="300"></a></li>
				</ul>	
			</li>
			<li><p>电视</p></li>
			<li class="top clearfix">
				<ul class="img-group clearfix" id="img-border">
					<li><a href=""><img src="img/151128115316652924.jpg" alt="" width="299" height="299" style="border-left: 1px solid silver;border-top: 1px solid silver"></a></li>
					<li>
						<a href=""><h4>《星球大战：义军崛起》第二季回归！</h4></a>
						<div class="font">
							《星球大战：义军崛起》第二季将同时登陆爱奇艺和乐视网动漫频道， 并每周与全球同步跟播。
							<a href=""><div class="circle"></div></a>
						</div>
					</li>
					<li>
						<a href=""><h4>平凡女孩，非凡小公主苏菲亚！</h4></a>
						<div class="font">
							每一集的节目里，苏菲亚都会遇到不同的问题，一起来看她怎麽克服困难，帮助身边需要协助的朋友，也让自己成为一个人见人爱的小公主。
							<a href=""><div class="circle"></div></a>
						</div>
					</li>
					<li><a href=""><img src="img/160108191615019832.jpg" alt=""></a></li>
				</ul>
				<a href="" id="big" style="height: 600px">
					<img src="img/160112154657793850.jpg" alt="">
					<div class="galaxy" style="width: 540px;position: relative;top: -150px">
						<h4>最爱迪士尼</h4>
						<p>汇集众多精彩且适合阖家共享的正版迪士尼动画剧集，包括《米奇妙妙屋》、《星际宝贝》、《小熊维尼与跳跳虎》、《飞哥与小佛》等，每一部动画剧集都有不同的风格，透过精彩的故事情节和丰富的动画内容，让观众从中领略到充满正能量的人生观。</p>
					</div>
				</a>
			</li>
			<li><p>更多影视资讯</p></li>
			<li class="more">
				<ul class="more-news clearfix">
					<li>
						<a href=""><img src="img/170301150118315523.jpg" alt=""></a>
						<div class="font-box">
							<h4><a href="">《赛车总动员3》6月全球上映，主要角色麦坤亮相！</a></h4>
							<p>为了重返巅峰，闪电麦坤背水一战！</p>
						</div>
					</li>
					<li>
						<ul class="list-news clearfix">
							<a href="">
								<li>
									<div class="data clearfix">
										<div class="data-font fl">
											<span>28</span>
											<i></i>
											<span>02</span>
										</div>
										<div class="data-img fl"><img src="img/1512091738492442410.jpg" alt=""></div>
									</div>
									<h6>《美女与野兽》中国首映礼红毯盛大举行</h6>
									<p>美丽帅气的好莱坞巨星+美轮美奂的奇幻童话城堡，这样的搭配也真是厉害了我的哥！</p>
								</li>
							</a>
							<a href="">
								<li>
									<div class="data clearfix">
										<div class="data-font fl">
											<span>28</span>
											<i></i>
											<span>02</span>
										</div>
										<div class="data-img fl"><img src="img/170301151900674488.jpg" alt=""></div>
									</div>
									<h6>《赛车总动员3：极速挑战》全新预告片来了！</h6>
									<p>老司机难道要彻底退出历史舞台？还是再度浴火重生？</p>
								</li>
							</a>
							<a href="">
								<li>
									<div class="data clearfix">
										<div class="data-font fl">
											<span>27</span>
											<i></i>
											<span>02</span>
										</div>
										<div class="data-img fl"><img src="img/170301150656003324.jpg" alt=""></div>
									</div>
									<h6>《Piper鹬》获奥斯卡最佳动画短片！</h6>
									<p>皮克斯再度将奥斯卡收入囊中，皮克斯威武！</p>
								</li>
							</a>
							<a href="">
								<li>
									<div class="data clearfix">
										<div class="data-font fl">
											<span>27</span>
											<i></i>
											<span>02</span>
										</div>
										<div class="data-img fl"><img src="img/170301152549940926.jpg" alt=""></div>
									</div>
									<h6>《奇幻森林》斩获奥斯卡最佳视觉效果！</h6>
									<p>《奇幻森林》仅有一位真人演员，动物角色全部CG化，具有里程碑意义！</p>
								</li>
							</a>
							<a href="">
								<li style="border:none">
									<div class="data clearfix">
										<div class="data-font fl">
											<span>23</span>
											<i></i>
											<span>02</span>
										</div>
										<div class="data-img fl"><img src="img/170301152923424957.jpg" alt=""></div>
									</div>
									<h6>《美女与野兽》同名中文主题曲MV浪漫发布！</h6>
									<p>《奇幻森林》仅有一位真人演员，动物角色全部CG化，具有里程碑意义！</p>
								</li>
							</a>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>

<!-- 页尾 -->
	<div class="center-box footer">
		<div class="middle-border clearfix">
			<div class="Disney-icon fl"><img src="img/b_logo.png" alt=""></div>
			<div class="wei fl">
				<ul>
					<li>
						<img src="img/weibo.jpg" alt="">
						<b>关注我们的微博</b>
					</li>
					<li>
						<img src="img/weixin.jpg" alt="">
						<b>关注我们的微信</b>
					</li>
				</ul>
			</div>
		</div>
		<div class="declare-font">
			<a href="">关于我们</a>
			<a href="">加入我们</a>
			<a href="">法律条款</a>
			<a href="">隐私政策</a>
			<a href="">退换货政策</a>
		</div>
		<p>
			Disney | Pixar All rights reserved. 备案号：沪ICP备07025394号-2
		</p>
	</div>

	<div id="vidBox">
		<video src="img/weibo.mp4" id="vid" controls></video>
		<a href="javascript:closeVid()"><img src="img/player_close.png" alt=""></a>
	</div>
	<script>
		function showVid() {
		 	vidBox.style.display='block';
		 	black.style.display='block';
		 	vid.play();
		} 
		function closeVid() {
		 	vidBox.style.display='none';
		 	black.style.display='none';
		 	vid.pause();
		 	vid.currentTime = 0;
		} 
	</script>
</body>
</html>